<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link href="js/jquery/jquery.uploadify-v2.1.0/uploadify.css"
              rel="stylesheet"
              type="text/css" />
        <link href="styles/default.css"
              rel="stylesheet"
              type="text/css"
              media="all">
        <script src="js/jquery/jquery-1.4.2.min.js"
        type="text/javascript"></script>
        <script type="text/javascript"
        src="js/jquery/jquery.uploadify-v2.1.0/swfobject.js"></script>
        <script type="text/javascript"
        src="js/jquery/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>
        <script type="text/javascript"
        src="js/jquery/jquery.form.js"></script>
        <style>
            div.float {
                float: left;
            }
            div.float p {
                text-align: center;
            }
            div.container {
                border: 2px dashed #333;
                background-color: #ffe;
                overflow: hidden;
                width: 100%;
            }

            div.test {
                width: 100%;
                background-color: red;
            }


        </style>
        <!--[if lte IE 6]>
            <style>
                div.test {
                    \width: 300px;
                    w\idth: 300px;
                }
            </style>
        <![endif]-->

        <!--[if gt IE 7]>
            <style>
                div.test {
                    \width: 300px;
                    w\idth: 300px;
                }
            </style>
        <![endif]-->
        <!--[if IE 7]>
            <style>
                div.test {
                    \width: 300px;
                    w\idth: 300px;
                }
            </style>
        <![endif]-->
        <!--[if lte IE 6]>
            <style>
                div.test {
                    \width: 300px;
                    w\idth: 300px;
                }
            </style>
        <![endif]-->
        
    </head>
    <body>
        <div class="container">
            <div class="float">
                <img src="images/image1.gif" width="100" height="300"
                     alt="image 1" /><br />
                <p>caption 1</p>
            </div>

            <div class="float">
                <img src="images/image2.gif" width="100" height="100"
                     alt="image 2" /><br />
                <p>caption 2</p>
            </div>

            <div class="float">
                <img src="images/image3.gif" width="100" height="100"
                     alt="image 3" /><br />
                <p>caption 3</p>
            </div>
        </div>
        <p style="background-color: blue;">
            My first HTML element is this text, then an image
            <img src="http://images.about.com/sites/guidepics/html.gif" width="50" height="50" border="0" alt="Jennifer Kyrnin, About Web Design Guide" /><br>
        <div style="position:relative; left:30px; top:-50px; color : #cc0000;width: 600px;background-color: yellow;">Then another text block</div>
    </p>

    <p>
        Scroll to the left to see my image, positioned 500 pixels from the left and 500 pixels down from the top of the browser window.
    </p>
    <div style="width: 250px;background-color: #333333;">
        TEST
    </div>
    <div style="width: 250px;background-color: yellow;">
        <div class="test" style="border:25px solid green;margin-left: 0px;">
            TEST
        </div>
    </div>
</body>
</html>

